<template>
  <div class="f-select-group min-w-[200px] bg-white p-[10px]">
    <!-- 搜索 -->
    <div>
      <el-input :placeholder="t('group.search.placeholder')" v-model="title" class="w-full" clearable @clear="getGroup" @keyup.enter="getGroup">
        <template #prefix>
          <el-icon><Search /></el-icon>
        </template>
      </el-input>
    </div>
    <!-- 列表 -->
    <el-scrollbar class="mt-[10px]">
      <el-tree :data="list" node-key="id" :current-node-key="active" highlight-current :expand-on-click-node="false" :props="{label:'name', children: 'child', value: 'id'}">
        <template #default="{ node, data }">
          <div class="item flex items-center justify-between w-[100%]" @click="handleSelect(data)">
            <div class="flex-1">{{ node.label }}</div>
            <div v-if="data.id !==0" class="btn pr-[10px] flex items-center">
              <el-dropdown @command="handleCommand($event, data, node)">
                <el-icon><MoreFilled /></el-icon>
                <template #dropdown>
                  <el-dropdown-menu>
                    <div v-permission:1205="$route.meta.auth">
                      <el-dropdown-item command="3">{{t('group.add.single')}}</el-dropdown-item>
                    </div>
                    <div v-permission:1206="$route.meta.auth">
                      <el-dropdown-item command="1">{{t('edit')}}</el-dropdown-item>
                    </div>
                    <div v-permission:1207="$route.meta.auth">
                      <el-dropdown-item command="2">{{t('delete')}}</el-dropdown-item>
                    </div>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </div>
        </template>
      </el-tree>
    </el-scrollbar>
    <div v-permission:1205="$route.meta.auth" class="pt-[10px]">
      <el-button class="w-full block" type="primary" text @click="handleAdd"><el-icon><Plus /></el-icon>{{t('group.add')}}</el-button>
    </div>

    <!-- 新建分组弹框 -->
    <f-form-model ref="formModelRef" is="GroupForm" @change="getGroup"></f-form-model>
  </div>
</template>
<script lang="ts" setup>
import { computed, onMounted, ref } from 'vue'
import { deleteGroupApi, getGroupTreeApi } from '../../api'
import FFormModel from '../../components/f-form-model'
import { ElMessage, ElMessageBox } from 'element-plus'
import { t } from '@/lang'

const prop = defineProps({
    modelValue: {
        type: Number,
        default: 0
    }
})

const emit = defineEmits(['change', 'update:modelValue'])

const formModelRef = ref()
const list = ref<IGroupItem[]>([])
const active = computed({
    get () {
        return prop.modelValue
    },
    set (value) {
        emit('update:modelValue', value)
    }
})

const title = ref('')

/**
 * 获取分组列表
 */
async function getGroup () {
    const res = await getGroupTreeApi({ name: title.value })
    list.value = [
        { id: 0, name: t('group.all'), is_show: 1, child: [], parent_id: 0 },
        ...res.data
    ]
}

/**
 * 新增
 */
function handleAdd (row?: IGroupItem) {
    formModelRef.value?.show(t('group.add'), row, false)
}

/**
 * 编辑
 * @param row
 */
function handleEdit (row: IGroupItem) {
    formModelRef.value?.show(t('group.update'), row, true)
}

/**
 * 删除数据
 * @param row
 */
async function handleDelete (row: IGroupItem, node: any) {
    const action = await ElMessageBox.alert(t('deleteTips'), t('alert.title'), {
        type: 'warning',
        showCancelButton: true,
        cancelButtonText: t('alert.cancel'),
        confirmButtonText: t('alert.confirm')
    })
    if (action === 'confirm') {
        await deleteGroupApi(row.id)
        ElMessage.success(t('deleteSuccess'))
        node.remove()
    }
}

/**
 * 更多操作
 * @param value
 * @param row
 */
function handleCommand (value:String, row: IGroupItem, node:any) {
    switch (value) {
        case '1':
            handleEdit(row)
            break
        case '2':
            handleDelete(row, node)
            break
        case '3':
            handleAdd(row)
            break
    }
}

function handleSelect (value:IGroupItem) {
    active.value = value.id || 0
    emit('change', value.id || 0)
}

onMounted(() => {
    getGroup()
})
</script>

<style lang="scss" scoped>

.f-select-group {
  height: calc(100vh - 100px);
  position: sticky;
  top: 15px;
  right: 15px;
  display: flex;
  flex-direction: column;
  background-color: var(--el-bg-color);

  .el-scrollbar {
    flex: 1;
  }

  :deep(.el-tree-node__content) {
    --el-tree-node-content-height: 34px;
  }

  .item {
    .btn {
      display: none;
    }
    &:hover {
      .btn {
        display: flex;
      }
    }
  }
  .is-current {

    .btn {
      display: flex;
    }
  }

}
</style>
